<template>
    <div class="catlist">
        <header id="header">
            <a href="javascript:history.go(-1)" class="back">
                <div class="iconfont icon-back"></div>
            </a>
            <h1 class="title">{{this.$route.query.name}}</h1>
            <!-- <nav class="sexbtn">
                <h3>
                    <a href="#" class="btn-tab active">男生</a>
                </h3>
                <h3>
                    <a href="#" class="btn-tab">女生</a>
                </h3>
            </nav> -->
            <div class="operate">
                <router-link to="/search" tag="span"  class="iconfont icon-search"></router-link>
                <span href="#" class="iconfont icon-menu"></span>
            </div>
        </header> 
        <div class="searchlist" v-if="searchlist">
            <ul ref="lists">
                <li v-for="(item,index) in searchlist" :key="index">
                    <router-link :to="{path:'/detail',query:{id:item._id}}">
                    
                        <img :src="'http://statics.zhuishushenqi.com'+item.cover" alt="">
                    
                    <div class="right">
                        <h4>{{item.title}}</h4>
                        <p>{{item.shortIntro}}</p>
                        <div class="infobox">
                            <span class="iconfont icon-zuozhe"></span>
                            <span class="author">{{item.author}}</span>
                        </div>
                    </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {getBookSearch} from '../api/search.js'
export default {
    data() {
        return {
            searchlist:[],
            offset:0,
            flag:true
        }
    },
    methods: {
        getBookSearchFun(){
            // if(this.searchvalue !=""){
                // this.historylist.push(this.searchvalue);
                if(this.flag){
                    this.flag = false;
                    this.offset += 7;
                    getBookSearch({query:this.$route.query.name}).then(data=>{
                // console.log(data);
                // this.searchlist = data.books.splice(this.offset,10);
                this.searchlist = this.searchlist.concat(data.books.splice(this.offset,7));
                this.flag=true;
            })
                }
            
            // }
        },
        //滚动条监听
        handleScroll(){            
                // console.log(111);
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrollTop);
            // console.log(this.$refs.lists.getElementsByTagName("li"));
            let lis = this.$refs.lists.getElementsByTagName("li");
            // console.log(lis);
            let num = lis.length;
            // console.log(num);
            let liHeight = lis[num-2].offsetTop;
            // console.log(liHeight);
            // console.log("滚动距离"+scrollTop+"高度"+liHeight/2);
            if(scrollTop > liHeight/3){
                // console.log("ok");
                this.getBookSearchFun();
            }            
        }
    },
    created(){
        // this.getBookSearchFun();
    },
    mounted(){
        this.$nextTick(()=>{
            this.getBookSearchFun();
            window.addEventListener("scroll",this.handleScroll);
        })
    },
    beforeDestroy() {
        window.removeEventListener("scroll",this.handleScroll);
    }
}
</script>
<style lang="less">
.catlist{
    #header{
    position: relative;
    box-sizing: border-box;
    height: 2.75rem;
    padding-top: .6875rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #f0f1f2;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .back{
        display: inline-block;
        padding-left: 12px;
        .iconfont{
            font-size: 18px;
        }
    }
    .title{
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.375rem;
    position: absolute;
    left: 2.6875rem;
    overflow: hidden;
    max-width: 60%;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .btn-tab{
    font-size: .8125rem;
    
    display: block;
    line-height: 1.6875rem;
    padding: 0 .75rem !important;
    text-align: center;
    color: #ed424b;
    border: 1px solid #ed424b;
    font-weight: normal !important;
}
    .sexbtn>h3:last-child>.btn-tab{
    border-radius: 0 4px 4px 0;
}
.sexbtn>h3:first-child>.btn-tab{
    border-radius: 4px 0 0 4px;
}
.active{
    color: #fff;
    background-color: #ed424b;
}
.sexbtn{
    display: flex;
    // margin-top: -4px;
    // margin-left: 40px;
    position: absolute;
    top: 21%;
    left: 37%;
    a{
        // font-size: 14px;
        font-weight: normal;
    }
}
.logo-a{
    padding: 0 1rem;
}
.logo{
    font-size: 18px;
    color: black;   
}
.operate{
    height: 2rem;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    line-height: 1.5rem;
    // padding: .25rem .375rem;
    // margin-left: 68px;
    /* margin-top: 4px; */
}
.operate span{
    display: inline-block;
    height: 24px;
    width: 24px;
    /* background-color: red; */
    margin-right: 6px;
    font-size: 16px;
    // color: #ed424b;
}
.operate span:last-child{
    font-size: 24px;
}
}
.searchlist{
    ul{
        li{
            a{
                position: relative;
                display: block;
                overflow: hidden;
                padding: 1rem;
                -webkit-transition: padding-left .15s;
                transition: padding-left .15s;
            }
            img{
                font-size: 0;
                float: left;
                width: 4.125rem;
                height: 5.5rem;
                margin-right: .5rem;
                box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
            }
            .right{
                overflow: hidden;
                h4{
                    line-height: 1.4;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                p{
                    line-height: 1.1875rem;
                    display: -webkit-box;
                    height: 2.25rem;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    font-size: .875rem;
                    // line-height: 1.125rem;
                    overflow: hidden;
                    margin: .375rem 0;
                    color: #969ba3;
                }
                .infobox{
                    font-size: .75rem;
                    overflow: hidden;
                    .iconfont{
                        color: #969ba3;
                        font-size: 0.625rem;
                    }
                    .author{
                        font-size: .8125rem;
                        color: #969ba3;
                    }
                }
            }
        }
    }
}
}
</style>